window.onload = function(){
    // 1、获取指定元素
    var content = document.getElementById("content");
    var container = document.getElementById("container");
    var allLis = content.getElementsByTagName("li")
    var ctl = document.getElementById("ctl");
    var prevBtn = ctl.getElementsByClassName("prev")[0];
    var nextBtn = ctl.getElementsByClassName("next")[0];
    var consWraper = document.getElementById("icon_wraper");
    var icons = consWraper.getElementsByClassName("icon");
    // 2、动态添加icon元素
    for(var i = 0; i < allLis.length; i++){
        var icon = document.createElement("div");
        icon.className = "icon";
        icon.innerText = i;

        consWraper.appendChild(icon);
    }
    icons[0].className = "icon selected";
    // 3、让滚动图片到右边去
    for(var i = 1; i < allLis.length; i++){
        allLis[i].style.left = "520px"
    }

    // 4、监听鼠标点击事件
    console.log(ctl);
    var iNow = 0;
    prevBtn.onclick = function(){
        myMove(allLis[iNow],{"left":520})
        iNow--;
        if(iNow < 0){
            iNow = allLis.length -1 }
        allLis[iNow].style.left = "-520px";
        myMove(allLis[iNow],{"left": 0})
        changeIndex();

    }
    nextBtn.onclick = function(){
        myMove(allLis[iNow],{"left": -520})
        iNow++;
        if(iNow > allLis.length -1){
            iNow = 0 }
        allLis[iNow].style.left = "520px";
        myMove(allLis[iNow],{"left": 0})
        changeIndex();

    }
    // 5、监听下面
    for(var i = 0;i < icons.length; i++){
        icon = icons[i];
        icon.onclick = function(){
            var index = parseInt(this.innerText)
            if (index > iNow){
                myMove(allLis[iNow],{"left": -520})
                iNow++;
                if(iNow > allLis.length -1){
                    iNow = 0 }
                allLis[index].style.left = "520px";

            }
            else if(index < iNow){
                myMove(allLis[iNow],{"left":520})
                iNow--;
                if(iNow < 0){
                    iNow = allLis.length -1 }
            }
            myMove(allLis[index],{"left": 0})
            iNow = index;




        }

    }


    // 6、自动走
    var timer = setInterval(
        autoPlay ,1000)


    container.onmouseenter = function(){
        clearInterval(timer)
    }
    container.onmouseleave = function(){
        timer = setInterval(
            autoPlay ,1000)
    }
    function autoPlay(){
        myMove(allLis[iNow],{"left": -520})
        iNow++;
        if(iNow > allLis.length -1){
            iNow = 0 }
        allLis[iNow].style.left = "520px";
        myMove(allLis[iNow],{"left": 0})
        changeIndex();
    }

    function changeIndex(){
        for(var j =0; j<icons.length; j++){
            icons[j].className = "icon";
        }
        icons[iNow].className = "icon selected";
    }

}